<template>
  <div class="app-container">
    <div class="app-main">
      <div class="mainName">白蚁灭治任务单查询</div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        label-width="100px"
        class="formSty"
      >
        <!-- 主要查询条件 -->
        <el-row>
          <el-col :span="5">
            <el-form-item label="任务单编号" prop="taskApplyCode">
              <el-input
                v-model="queryParams.taskApplyCode"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="信息来源" prop="informationSource">
              <el-select
                v-model="queryParams.informationSource"
                size="small"
                placeholder="请选择"
              >
                <el-option value="1" label="信息1"></el-option>
                <el-option value="2" label="信息2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否灭治" prop="killYes">
              <el-select
                v-model="queryParams.killYes"
                size="small"
                placeholder="请选择"
              >
                <el-option value="1" label="是"></el-option>
                <el-option value="2" label="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" class="" v-if="!isExpanded">
            <el-form-item label-width="50px" style="text-align: right">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="toggleExpand"
                class="expand-toggle"
              >
                {{ isExpanded ? "收起" : "展开" }}
                <i
                  :class="[
                    'expand-icon',
                    isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                  ]"
                ></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="9" v-else>
            <el-form-item label="受理日期">
              <el-date-picker
                v-model="acceptanceTime"
                format="yyyy-MM-dd"
                @change="changeAcceptanceTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 次要查询条件 - 可展开收起 -->
        <el-collapse-transition>
          <div v-show="isExpanded" class="expand-section">
            <el-row>
              <el-col :span="5">
                <el-form-item label="企业名称" prop="householdUnitName">
                  <el-input
                    v-model="queryParams.householdUnitName"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="小区名称" prop="householdUnitName">
                  <el-input
                    v-model="queryParams.householdUnitName"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="地址" prop="address">
                  <el-input
                    v-model="queryParams.address"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item label="查勘日期">
                  <el-date-picker
                    v-model="checkDate"
                    format="yyyy-MM-dd"
                    @change="changeCheckDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

              <!-- </el-row>
            <el-row> -->
              <el-col :span="5">
                <el-form-item label="联系人" prop="householdContacts">
                  <el-input
                    v-model="queryParams.householdContacts"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="联系电话" prop="householdPhone">
                  <el-input
                    v-model="queryParams.householdPhone"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="蚁种" prop="constructionTermiteType">
                  <el-select
                    v-model="queryParams.constructionTermiteType"
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option value="1" label="1"></el-option>
                    <el-option value="2" label="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="施工日期">
                  <el-date-picker
                    v-model="constructionDate"
                    format="yyyy-MM-dd"
                    @change="changeConstructionDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="width80">
                <el-form-item label="单个任务灭治金额" label-width="140px">
                  <el-input
                    v-model="queryParams.constructionMoneySmall"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                  <span>&nbsp;-&nbsp;</span>
                  <el-input
                    v-model="queryParams.constructionMoneyLarge"
                    placeholder="请输入"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="height: 1px">
                <!-- 空列 -->
              </el-col>
              <el-col :span="9">
                <el-form-item label-width="50px" style="text-align: right">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="toggleExpand"
                    class="expand-toggle"
                  >
                    {{ isExpanded ? "收起" : "展开" }}
                    <i
                      :class="[
                        'expand-icon',
                        isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                      ]"
                    ></i>
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-form>
      <el-table v-loading="loading" :data="list" border stripe :key="1">
        <el-table-column
          label="序号"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          label="任务单编号"
          align="center"
          prop="taskApplyCode"
          min-width="100"
        />
        <el-table-column
          label="白蚁防治企业名称"
          align="center"
          prop="controlName"
          min-width="180"
        />
        <el-table-column
          label="受理日期"
          align="center"
          prop="createTime"
          min-width="180"
        />
        <el-table-column
          label="勘察日期"
          align="center"
          prop="createTime"
          min-width="180"
        />
        <el-table-column
          label="施工日期"
          align="center"
          prop="createTime"
          min-width="180"
        />
        <el-table-column
          label="上报截止日期"
          align="center"
          prop="createTime"
          min-width="180"
        />
        <!-- <el-table-column
          label="联系人"
          align="center"
          prop="householdContacts"
        />
        <el-table-column
          label="联系电话"
          align="center"
          prop="householdPhone"
        /> -->
        <el-table-column
          label="地址"
          align="center"
          prop="addressCommunityName"
        />
        <el-table-column label="是否灭治" align="center" prop="killInput" />
        <el-table-column
          label="信息来源"
          align="center"
          prop="informationSource"
        />

        <!-- <el-table-column label="是否灭治" align="center" prop="applyState">
          <template slot-scope="scope">
            <div>{{scope.row.applyState === '1' ? '待审核' : '编辑'}}</div>
          </template>
        </el-table-column>-->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="pagination-container"
      />
    </div>
  </div>
</template>

<script>
import {
  controlTaskListQuery, // 白蚁灭治任务单查询
} from "@/api/manage/approval";
export default {
  name: "taskSearch",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskApplyCode: "",
        informationSource: "",
        killYes: "",
        // constructionDate: [],
        constructionDateStart: "",
        constructionDateEnd: "",
        householdUnitName: "",
        // checkDate: [],
        checkDateStart: "", // 查勘-日期开始
        checkDateEnd: "", // 查勘-日期结束
        // acceptanceTime: [],
        acceptanceTimeStart: "", // 受理时间开始
        acceptanceTimeEnd: "", // 受理时间结束
        address: "",
        householdContacts: "",
        householdPhone: "",
        constructionTermiteType: "",
        constructionMoneySmall: "",
        constructionMoneyLarge: "",
      },
      constructionDate: [],
      checkDate: [],
      acceptanceTime: [],
      loading: false,
      list: [],
      total: 0,
      // 展开收起状态
      isExpanded: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      controlTaskListQuery(this.queryParams)
        .then((res) => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    changeConstructionDate(val) {
      if (val) {
        this.queryParams.constructionDateStart = val[0];
        this.queryParams.constructionDateEnd = val[1];
      } else {
        this.queryParams.constructionDateStart = "";
        this.queryParams.constructionDateEnd = "";
      }
    },
    changeCheckDate(val) {
      if (val) {
        this.queryParams.checkDateStart = val[0];
        this.queryParams.checkDateEnd = val[1];
      } else {
        this.queryParams.checkDateStart = "";
        this.queryParams.checkDateEnd = "";
      }
    },
    changeAcceptanceTime(val) {
      if (val) {
        this.queryParams.acceptanceTimeStartt = val[0];
        this.queryParams.acceptanceTimeEnd = val[1];
      } else {
        this.queryParams.acceptanceTimeStartt = "";
        this.queryParams.acceptanceTimeEnd = "";
      }
    },
    handleQuery() {
      this.getList();
      console.log(this.queryParams, "queryParams");
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.constructionDate = [];
      this.checkDate = [];
      this.acceptanceTime = [];
      this.getList();
    },
    // 切换展开收起状态
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  background-color: #fff;
  // padding: 15px 20px;
  border-radius: 8px;
  .mainName {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    color: #000000;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .btnGroup {
    text-align: right;
    margin: 15px 0;
  }
}
.formSty {
  ::v-deep .el-select {
    width: 100%;
  }
  ::v-deep .el-input {
    width: 100%;
  }
  ::v-deep .el-date-editor {
    width: 100%;
  }
}
.width80 {
  ::v-deep .el-input {
    width: calc(50% - 9px);
  }
}

// 展开收起按钮样式
.expand-toggle {
  margin-left: 10px;
  color: #409eff;
  font-size: 12px;

  &:hover {
    color: #66b1ff;
  }

  .expand-icon {
    margin-left: 4px;
    transition: transform 0.3s ease;
  }
}

// 表单展开收起动画优化
.el-collapse-transition {
  transition: all 0.3s ease;
}

// 查询表单优化
// .formSty {
//   .expand-section {
//     border-top: 1px solid #f0f0f0;
//     margin-top: 10px;
//     padding-top: 15px;
//   }
// }
</style>
